<template>
  <!--banner轮播-->
        <div class="swiper-container"
             ref="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="banner in bannerList" :key="banner.id">
              <img :src="banner.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
</template>

<script>
//引入轮播图依赖
import Swiper from "swiper"

export default {
  name:"Carsouel",
  props:['bannerList'],
  watch:{
    bannerList:{
      //bannerList一传过来就是有数据的。所以这里监视不到数据的改变，需要用immediate
      immediate:true,
      handler(newValue,oldValue){
       this.$nextTick(()=>{
        var mySwiper = new Swiper(this.$refs.mySwiper,{
            loop:true,
            //如果需要分页器
            pagination:{
              el:".swiper-pagination",
              //点击小球的时候也切换图片
              clickable:true,
            },
            //如果需要前进后退按钮
            navigation:{
              nextEl:".swiper-button-next",
              prevEl:".swiper-button-prev"
            }
        })
       })
      }
    }
  }
}
</script>

<style>

</style>